home *** CD-ROM | disk | FTP | other *** search
/ PCGUIA 114 / PC Guia 114.iso / Software / Utils / The Gimp 2.2.1 / gimp-help-2-0.6-setup.exe / {app} / share / gimp / 2.0 / help / en / ch02s07.html < prev    next >
Encoding:
Extensible Markup Language  |  2004-12-19  |  6.4 KB  |  163 lines
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <title>7.┬áPreparing your Images for the web</title>
  7.     <link rel="stylesheet" href="gimp-help-plain.css" type="text/css" />
  8.     <link rel="stylesheet" href="gimp-help-screen.css" type="text/css" />
  9.     <meta name="generator" content="DocBook XSL Stylesheets V1.66.1" />
  10.     <link rel="start" href="index.html" title="GIMP User Manual" />
  11.     <link rel="up" href="ch02.html" title="Chapter┬á2.┬áUsing Gimp" />
  12.     <link rel="prev" href="ch02s06s06.html" title="6.6.┬áSaving Your Results" />
  13.     <link rel="next" href="ch02s08.html" title="8.┬áPlugins" />
  14.   </head>
  15.   <body>
  16.     <div xmlns="" class="navheader">
  17.       <table width="100%" summary="Navigation header">
  18.         <tr>
  19.           <th colspan="3" align="center" id="chaptername">Chapter┬á2.┬áUsing <span xmlns="http://www.w3.org/1999/xhtml" class="acronym">Gimp</span></th>
  20.         </tr>
  21.         <tr>
  22.           <td width="20%" align="left"><a accesskey="p" href="ch02s06s06.html">Prev</a>┬á</td>
  23.           <th width="60%" align="center" id="sectionname">7.┬áPreparing your Images for the web</th>
  24.           <td width="20%" align="right">┬á<a accesskey="n" href="ch02s08.html">Next</a></td>
  25.         </tr>
  26.       </table>
  27.       <hr />
  28.     </div>
  29.     <div class="sect1" lang="en" xml:lang="en">
  30.       <div class="titlepage">
  31.         <div>
  32.           <div>
  33.             <h2 class="title" style="clear: both"><a id="gimp-using-web"></a>7.┬áPreparing your Images for the web</h2>
  34.           </div>
  35.         </div>
  36.       </div>
  37.       <a id="id3427801" class="indexterm"></a>
  38.       <p>
  39.     One of the most common purposes <span class="acronym">GIMP</span> is used for, is to prepare
  40.     images for adding them to a web site. This means that the
  41.     images should look as nice as possible while keeping the file
  42.     size as small as possible.
  43.     This little step-by-step guide will tell you how to achieve a
  44.     smaller file size with minimal degradation of image quality.
  45.   </p>
  46.       <div class="procedure">
  47.         <ol type="1">
  48.           <li>
  49.             <p>
  50.         First open the image as usual. I opened our Wilber as an
  51.         example image.
  52.       </p>
  53.             <div class="informalfigure">
  54.               <div class="mediaobject">
  55.                 <img src="../images/using/preparing_for_web1.png" />
  56.                 <div class="caption">
  57.                   <p>
  58.               The Wilber image opened in the RGBA mode.
  59.             </p>
  60.                 </div>
  61.               </div>
  62.             </div>
  63.           </li>
  64.           <li>
  65.             <p>
  66.         The image is now in RGB mode with an additional <a href="go01.html#glossary-alpha">alpha channel</a> (RGBA).  Mostly there
  67.         is no need to have an alpha channel for your web image. You
  68.         can remove the Alpha channel by <a href="ch05s06s09.html" title="6.9.┬áFlatten Image">flattening the Image</a>.
  69.       </p>
  70.           </li>
  71.           <li>
  72.             <p>
  73.         After flattening, you are able to <a href="ch05s02s04.html" title="2.4.┬áSave">save the image</a> in <a href="go01.html#file-png-save-defaults">PNG Format</a> for your
  74.         homepage. 
  75.       </p>
  76.           </li>
  77.         </ol>
  78.       </div>
  79.       <div class="note" style="margin-left: 0.5in; margin-right: 0.5in;">
  80.         <table border="0" summary="Note">
  81.           <tr>
  82.             <td rowspan="2" align="center" valign="top" width="25">
  83.               <img alt="[Note]" src="../images/note.png" />
  84.             </td>
  85.             <th align="left">Note</th>
  86.           </tr>
  87.           <tr>
  88.             <td colspan="2" align="left" valign="top">
  89.               <p>
  90.       You can save the PNG with the default settings, but with a
  91.       maximal compression. Saving your image in PNG doesn't have any
  92.       quality drawbacks in comparison to eg. <a href="go01.html#file-jpeg-save">JPEG</a>.
  93.     </p>
  94.             </td>
  95.           </tr>
  96.         </table>
  97.       </div>
  98.       <div class="sect2" lang="en" xml:lang="en">
  99.         <div class="titlepage">
  100.           <div>
  101.             <div>
  102.               <h3 class="title"><a id="id3427932"></a>7.1.┬áSqueezing Filesize a bit more</h3>
  103.             </div>
  104.           </div>
  105.         </div>
  106.         <p>
  107.       If you want to squeeze your image a bit more, you could convert
  108.       your image to Indexed mode.  Converting images with smooth
  109.       color transitions or gradients to indexed mode will often give poor
  110.       results, because it will turn the smooth gradients into a series
  111.       of bands. Well, lets try to convert the image anyway.
  112.     </p>
  113.         <div class="procedure">
  114.           <div class="informalfigure">
  115.             <div class="mediaobject">
  116.               <img src="../images/using/preparing_for_web2.png" />
  117.               <div class="caption">
  118.                 <p>
  119.             The indexed image can look a bit grainy. The left image is
  120.             the wilber in original size, the right one zoomed in by 300
  121.             percent.
  122.           </p>
  123.               </div>
  124.             </div>
  125.           </div>
  126.           <ol type="1">
  127.             <li>
  128.               <p>
  129.           Use the <a href="ch05s06s02.html" title="6.2.┬áMode">Convert Mode
  130.           Dialog</a> to convert your RGB image to indexed mode.
  131.         </p>
  132.             </li>
  133.             <li>
  134.               <p>
  135.           After converting to indexed, you are once again able to <a href="ch05s02s04.html" title="2.4.┬áSave">save</a> your image in <a href="go01.html#file-png-save-defaults">PNG Format</a>.
  136.         </p>
  137.             </li>
  138.           </ol>
  139.         </div>
  140.       </div>
  141.     </div>
  142.     <div class="navfooter">
  143.       <hr />
  144.       <table width="100%" summary="Navigation footer">
  145.         <tr>
  146.           <td width="40%" align="left"><a accesskey="p" href="ch02s06s06.html">Prev</a>┬á</td>
  147.           <td width="20%" align="center">
  148.             <a accesskey="u" href="ch02.html">Up</a>
  149.           </td>
  150.           <td width="40%" align="right">┬á<a accesskey="n" href="ch02s08.html">Next</a></td>
  151.         </tr>
  152.         <tr>
  153.           <td width="40%" align="left" valign="top">6.6.┬áSaving Your Results┬á</td>
  154.           <td width="20%" align="center">
  155.             <a accesskey="h" href="index.html">Home</a>
  156.           </td>
  157.           <td width="40%" align="right" valign="top">┬á8.┬áPlugins</td>
  158.         </tr>
  159.       </table>
  160.     </div>
  161.   </body>
  162. </html>
  163.